// import React from "react";
import React, { useState, useEffect } from "react";
import { Row, Col, Input, Button, message, Divider, Tooltip, Spin } from "antd";
import axios from "axios";
import servicePath from "../config/apiUrl";
import '../static/css/miQuan.scss'

export default function AddShareTopic(props) {
  const [shareTopicTitle, setShareTopicTitle] = useState(""); //专题名称：
  const [topicId, setTopicId] = useState(0); //专题ID：
  const [shareAdvice, setShareAdvice] = useState(""); 
  const [shareImg, setShareImg] = useState(""); 
  const [spinning, setSpinning] = useState(false); // loading
  const [shareResource, setShareResource] = useState(""); 
  const [shareInfo, setShareInfo] = useState(""); 
  useEffect(() => {
    //获得文章ID
    let tmpId = props.match.params.id
    if(tmpId){
      // console.log(tmpId,"9999999999999999999999999999999");
      
      setTopicId(tmpId)
      getTopicById(tmpId)
    } 
  }, []);
  const getTopicById = id => {
    setSpinning(true)
    axios(servicePath.getTopicListById + id, {
      withCredentials: false,
      header: { "Access-Control-Allow-Origin": "*" }
    }).then(res => {
      let miQuanInfo= res.data.data[0]
      setShareTopicTitle(miQuanInfo.shareTopicTitle);
      setShareAdvice(miQuanInfo.shareAdvice);
      setShareResource(miQuanInfo.shareResource);
      setShareImg(miQuanInfo.shareImg);
      setShareInfo(miQuanInfo.shareInfo);
      setSpinning(false)
    }).catch((err)=>{
      message.error(err.response.data.data)
      if(err.response.status === 401){
        props.history.push("/login")
      }
      setSpinning(false)
    })
  };
  const initData = () => {
    setShareTopicTitle('')
    setShareAdvice('')
    setShareResource('')
    setShareInfo('')
    setShareImg('')
  }
  const postShareTopic = ()=>{
    setSpinning(true)
    if (!shareTopicTitle) {
      message.error("专题名称不能为空")
      setSpinning(false)
      return false;
    } else if (!shareAdvice) {
      message.error("学习方式不能为空")
      setSpinning(false)
      return false;
    } 
    // else if (!shareResource) {
    //   message.error("资源链接不能为空")
    //   return false;
    // } 
    else if (!shareInfo) {
      message.error("专题简介不能为空")
      setSpinning(false)
      return false;
    } else if (!shareImg) {
      message.error("专题背景不能为空")
      setSpinning(false)
      return false;
    } 
    message.success("检验通过")
    let dataProps = {}; //传递到接口的参数  
    dataProps.shareTopicTitle = shareTopicTitle;
    dataProps.shareAdvice = shareAdvice;
    dataProps.shareResource = shareResource;
    dataProps.shareInfo = shareInfo;
    dataProps.shareImg = shareImg;
    // console.log(dataProps,"333333333");
    if (topicId === 0) {
      setSpinning(true)
      dataProps.addTime = new Date().getTime();
      dataProps.updateTime = new Date().getTime();
      // console.log("articleId=:" + articleId);
      dataProps.view_count = Math.ceil(Math.random() * 100) + 1000;
      axios({
        method: "post",
        url: servicePath.addShareTopic,
        data: dataProps,
        withCredentials: false
      }).then(res => {
        // setArticleId(res.data.insertId);
        if (res.data.isScuccess) {
          message.success("专题发布成功");
          props.history.push("/index/shareTopicList/")
          initData()
        } else {
          message.error(res.data.isError);
        }
        setSpinning(false)
      }).catch((err)=>{
        message.error(err.response.data.data)
        if(err.response.status === 401){
          props.history.push("/login")
        }
        setSpinning(false)
      })
    } else {
      setSpinning(true)
      dataProps.updateTime = new Date().getTime();
      dataProps.id = topicId;
      axios({
        method: "post",
        url: servicePath.updateShareTopic,
        data: dataProps,
        withCredentials: false
      }).then(res => {
        // setArticleId(res.data.insertId);
        if (res.data.isScuccess) {
          message.success("专题修改成功");
          props.history.push("/index/shareTopicList/")
          initData()
        } else {
          message.error(res.data.isError);
        }
        setSpinning(false)
      }).catch((err)=>{
        message.error(err.response.data.data)
        if(err.response.status === 401){
          props.history.push("/login")
        }
        setSpinning(false)
      })
    }
    
  }
  return (
    <div className="miQuan">
      <Spin tip="Loading..." spinning={ spinning }>
        <Row>
          <Col span={6} push={18} className="miQuan-view">
            <div style={{ textAlign:'center',margin:'0 auto' }}>
              <img src={ shareImg } alt="Lbxin 专注于WEB和移动前端开发" style={{ width:'100%',height:'220px' }} />
              <Divider style={{color:'red',borderColor:'#000'}}>{ shareTopicTitle }</Divider>
              <h4>专题名称：{ shareTopicTitle?shareTopicTitle:'待输入' }</h4>
              <h4>学习推荐：
                <Tooltip placement="top" title={`跳转地址：${shareAdvice?shareAdvice:'暂无'}`}>
                  <a href={ shareAdvice } className="blue_link" target="_blank">{ shareAdvice?shareAdvice:'待输入' }</a>
                </Tooltip>
              </h4>
              <h4 className="shareTopicInfo">学习资源：
                <Tooltip placement="top" title={`跳转地址：${shareResource?shareResource:'暂无'}`}>
                  <a href={ shareResource } className="blue_link" target="_blank">{ shareResource?'是':'否' }</a>
                </Tooltip>
              </h4>
              <h4 className="shareTopicInfo">专题简介：
                <Tooltip placement="top" title={`专题简介：${shareInfo?shareInfo:'暂无'}`}>
                  { shareInfo?shareInfo:'待输入' }
                </Tooltip>
              </h4>
              {/* <h4>专题简介：{ shareInfo?shareInfo:'待输入' }</h4> */}
            </div>
          </Col>
          <Col span={18} pull={6} className="miQuan-advice">
            <p>
              <span >专题名称：</span>
              <Input placeholder="专题名称：" value={ shareTopicTitle } onChange={e => { setShareTopicTitle(e.target.value); }} />
            </p>
            <p>
              <span >专题背景：</span>
              <Input placeholder="专题背景：" value={ shareImg } onChange={e => { setShareImg(e.target.value); }} />
            </p>
            <p>
              <span >学习推荐：</span>
              <Input placeholder="学习推荐：" value={ shareAdvice } onChange={e => { setShareAdvice(e.target.value); }} />
            </p>
            <p>
              <span >学习资源：</span>
              <Input placeholder="学习资源：" value={ shareResource } onChange={e => { setShareResource(e.target.value); }} />
            </p>
            <p>
              <span >专题简介：</span>
              <Input placeholder="专题简介：" value={ shareInfo } onChange={e => { setShareInfo(e.target.value); }} />
            </p>
          </Col>
          <Button type="primary" size="large" onClick={ postShareTopic }>
            {topicId>0?'更新':'发布专题'}
          </Button>
        </Row>
      </Spin>
    </div>
  )
}
